<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Required meta tags always come first -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="x-ua-compatible" content="ie=edge">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="bootstrap-4.1.1/css/bootstrap.css">
    <!-- font-awesome font -->
    <link rel="stylesheet" href="font-awesome-3.2.1/css/font-awesome.min.css">
    <!--[if IE 7]>
    <link rel="stylesheet" href="font-awesome-3.2.1/css/font-awesome-ie7.min.css">
    <![endif]-->

    <title>chat Web</title>
    <link rel="stylesheet" href="assert/main.css">
</head>
<body>

<div class="container px-0" style="height: 100%;" id="app">
    <div style="height: 30px;"></div>
    <div class="ui_left">
        <div class="container-fluid scrol_show fill_all">
            <div class="row">
                <div class="list-group" style="font-size: 90%; width: 100%;">

                    <li class="list-group-item head-main active">
                        <img :src="info.icon" class="head-show">
                        <h5 class="list-group-item-heading">{{ info.name }}<small>{{ info.uid }}</small></h5>
                        <p class="list-group-item-text"><i class="icon-camera status-on"></i>{{ info.desc }}</p>
                    </li>
                    <a href="#" class="list-group-item head-main" v-for="oUser in friends" v-on:click="clickUser(oUser.uid);">
                        <img :src="oUser.icon" class="head-show">
                        <h5 class="list-group-item-heading">{{ oUser.name }}<small>{{ oUser.uid }}</small></h5>
                        <p class="list-group-item-text"><i class="icon-circle status-on"></i>{{ oUser.desc }}</p>
                    </a>
                </div>
            </div>
        </div>
    </div>
    <div class="ui_right">
        <div class="row" style="height: 100%;margin-left: -25px;margin-right: 0px;">
            <div class="card card-block fill_all" style="width: 100%; padding: 10px; padding-bottom: 0px;">
                <div class="card-title">
                    <div style="font-size: 130%;">与【{{ curTalk.curUser.name }}】交谈中 - {{ curTalk.curUser.uid }}</div>
                    <span style="font-size: 120%;">
                        <a class="icon-camera-retro" href="#" title="截图"> </a>
                        <a class="icon-facetime-video" href="#" title="视频"> </a>
                        <a class="icon-file" href="#" title="传文件"> </a>
                    </span>
                </div>
                <div class="card-text" style="height: 100%;">
                    <div class="scrol_show chat-body">
                        <div class="chat-box chat-box-right">
                            <div style="display: inline-block; ">
                                纯CSS气泡框实现方法探究 气泡框(或者提示框)是网页中一种很常见的元素,大多用来展示提示信息,如下图所示: 拆分来看,形如这种气泡框无外乎就是一个矩形框
                            </div>
                        </div>

                        <div class="chat-box" v-for="oTxt in curTalk.txts" v-bind:class="{ 'chat-box-right': oTxt.isMe }">
                            <div style="display: inline-block;"> {{ oTxt.Msg }} </div>
                        </div>

                    </div>
                </div>
                <div class="chat-foot">
                    <div class="input-group input-group-sm mb-3">
                        <div class="input-group-prepend">
                            <span class="input-group-text" id="inputGroup-sizing-sm">聊天:</span>
                        </div>
                        <input type="text" class="form-control" aria-describedby="inputGroup-sizing-sm" placeholder="支持文本和emoji..." id="chat_txt">
                        <div class="input-group-append">
                            <button class="btn btn-success" type="button" v-on:click="sendMsg();">发送</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
    <div class="clearfix"></div>
</div>

<div class="container-fluid" id="login_ui" style="display: none; padding: 10px; overflow: hidden">
    <div class="form-group row">
        <label class="col-sm-3 col-form-label">UID:</label>
        <div class="col-sm-9">
            <input type="text" class="form-control" name="uid" placeholder="账户ID" value="100000">
        </div>
    </div>
    <div class="form-group row">
        <label class="col-sm-3 col-form-label">密码:</label>
        <div class="col-sm-9">
            <input type="password" class="form-control" name="pwd" placeholder="用户密码">
        </div>
    </div>

</div>

<!-- jQuery first, then Bootstrap JS. -->
<script src="jquery-3.3.1.min.js"></script>
<script src="bootstrap-4.1.1/js/bootstrap.js"></script>
<script src="layer/layer.js"></script>
<script src="assert/imback.js"></script>
<script src="vue.js"></script>

<script>
    var login_i = null;

    var app = new Vue({
        el: "#app",
        data: {
            sessionid : "",
            tmPing: null,
            info : {},
            friends : [],
            groups: [],
            curTalk : {
                curUser : {},
                txts : [],
            },
        },
        methods: {
            login : function (uid, pwd) {
                $.ajax({
                    url: "http://192.168.103.3:9000/user/login",
                    method: "post",
                    timeout: 3000,
                    data: {
                        "uid": uid,
                        "pwd": pwd,
                    },
                    success: function (c) {
                        if ( c.code == 200 ){
                            app.$data.sessionid = c.msg;
                            if( app.$data.sessionid.length > 0 ){
                                layer.msg("登录成功! 正在获取信息...",{time: 5000});
                            }else{
                                layer.msg("登录失败！");
                            }
                        }
                    },
                    error: function () {
                        layer.msg("网络连接错误！");
                    }
                });
            },
            logout: function () {
                $.ajax({
                    url: "http://192.168.103.3:9000/user/logout",
                    method: "post",
                    timeout: 3000,
                    data: {
                        "token": app.$data.sessionid,
                    },
                    success: function (c) {
                        layer.msg("登录失败！");
                    },
                    error: function () {
                        layer.msg("网络连接错误！");
                    }
                });
                this.sessionid = "";
            },
            getInfo: function () {
                $.ajax({
                    url: "http://192.168.103.3:9000/user/info",
                    method: "post",
                    timeout: 3000,
                    data: {
                        "token": app.$data.sessionid,
                    },
                    success: function (c) {
                        if ( c.code == 200 ){
                            var tmp = c.msg;
                            for( var i=0;i<tmp.length;i++ ){
                                if( tmp[i].icon.length < 1 ){
                                    tmp[i].icon = "assert/walter.png";
                                }
                            }
                            app.$data.info = tmp[0];
                        }
                    },
                    error: function () {
                        layer.msg("网络连接错误！");
                    }
                });
            },
            getFriends: function () {
                $.ajax({
                    url: "http://192.168.103.3:9000/user/friends",
                    method: "post",
                    timeout: 3000,
                    data: {
                        "token": app.$data.sessionid,
                    },
                    success: function (c) {
                        if ( c.code == 200 ){
                            var tmp = c.msg;
                            for( var i=0;i<tmp.length;i++ ){
                                if( tmp[i].icon.length < 1 ){
                                    tmp[i].icon = "assert/default-head.png";
                                }
                            }
                            app.$data.friends = tmp;
                        }
                    },
                    error: function () {
                        layer.msg("网络连接错误！");
                    }
                });
            },
            getGroups: function () {
                $.ajax({
                    url: "http://192.168.103.3:9000/user/friends",
                    method: "post",
                    timeout: 3000,
                    data: {
                        "token": app.$data.sessionid,
                    },
                    success: function (c) {
                        if ( c.code == 200 ){
                            var nVal = parseInt(c.msg);
                            if( nVal < 0 ){
                                app.$data.sessionid = "";
                            }
                        }
                    },
                    error: function () {
                        layer.msg("网络连接错误！");
                    }
                });
            },
            ping: function () {
                $.ajax({
                    url: "http://192.168.103.3:9000/user/ping",
                    method: "post",
                    timeout: 3000,
                    data: {
                        "token": app.$data.sessionid,
                    },
                    success: function (c) {
                        if ( c.code == 200 ){
                            app.$data.sessionid = c.msg;
                        }
                    },
                    error: function () {
                        layer.msg("网络连接错误！");
                    }
                });
            },
            clickUser: function (uid) {
                uid = uid + "";
                for( var i=0;i<this.friends.length;i++ ){
                    if( this.friends[i].uid == uid ){
                        this.curTalk.curUser = this.friends[i];
                        break
                    }
                }
            },
            sendMsg: function () {
                var chat_i = $("#chat_txt");
                console.log(this.curTalk.curUser.uid);
                if ( typeof this.curTalk.curUser.uid == "undefined" ){
                    layer.msg("请先选择一个Friend进行聊天...");
                    return;
                }
                var msg = {
                    isMe : true,
                    Msg : chat_i.val(),
                };
                this.curTalk.txts.push(msg);
                this.$nextTick(function(){
                    /*DOM更新了*/
                    scroll_end();
                    chat_i.val("");
                })
            },
        },
        watch:{
            sessionid: function (val) {
                if( val == null || val.length < 1 ){
                    show_login();
                }else{
                    layer.close(login_i);
                    this.getInfo();
                    this.getFriends();
                }
            },
        }
    });

    function show_login() {
        login_i = layer.open({
            id: "login_main",
            type: 1,
            anim: 5,
            skin: 'layui-layer-molv', //样式类名
            icon: 1,
            content: $("#login_ui"),
            resize: false,
            title: "登录IM",
            btnAlign: 'c', // 居中对齐
            closeBtn : false,
            btn: ["登录"],
            yes: function (index, layero) {
                strUID = $("#login_ui div div input[name='uid']").val();
                strPWD = $("#login_ui div div input[name='pwd']").val();
                app.login(strUID, strPWD);
            }
        });
    }
    function scroll_end() {
        var chat_list = $(".chat-body").first();
        chat_list.scrollTop(chat_list.get(0).scrollHeight - chat_list.height());
    }
    $(function () {
        app.$data.sessionid = null;
    });
</script>
</body>
</html>
